<include file="public@media_head">
<div class="container-fluid">
    <div class="hall-banner mb-4">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="#"> <img src="__TMPL__/public/assets/images/upload/hall_banner.jpg" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"> <img src="__TMPL__/public/assets/images/upload/hall_banner.jpg" alt=""></a>
                </div>
                <div class="swiper-slide">
                    <a href="#"> <img src="__TMPL__/public/assets/images/upload/hall_banner.jpg" alt=""></a>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="hall-online-box">
        <ul class="nav nav-tabs navlist mb-4" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#natural" role="tab" aria-controls="natural"
                   aria-selected="true">自然科学</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#engineering" role="tab" aria-controls="engineering"
                   aria-selected="false">工程技术</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#humanities" role="tab" aria-controls="humanities"
                   aria-selected="false">人文社会科学</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade show active" id="natural" role="tabpanel" aria-labelledby="home-tab">
                <section class="hall-list row">
                		<php>$category_ids=21;</php>
        						<portal:articles limit="" order="post.published_time DESC" categoryIds="$category_ids">
                    <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                        <div class="card hall-card">
                            <div class="card-img-top">
                                <figure class="figure">
                                    <a href="{:url('portal/Article/index',array('id'=>$vo['id'],'cid'=>$vo.category_id))}">
                                        <if condition="empty($vo.more.thumbnail)">
												                <img src="__TMPL__/public/assets/images/default_tupian4.png" class="img-fluid" alt="{$vo.post_title}"/>
												                <else/>
												                <img src="{:cmf_get_image_url($vo.more.thumbnail)}" class="img-fluid" alt="{$vo.post_title}"/>
												                </if>
                                        <figcaption class="cis-mask">
                                            <div class="slide-boom-mask">
                                                <div class="hall-card-eye iconcis icon-eye"></div>
                                            </div>
                                        </figcaption>
                                    </a>
                                </figure>
                            </div>
                            <div class="card-body">
                                <h6 class="card-title">{$vo.post_title}</h6>
                                <div class="card-text row card-tags">
                                    <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;<?php echo date('Y-m-d H:i',$vo['published_time']);?></span>
                                    <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;{$vo.comment_count}</span>
                                    <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;{$vo.post_hits}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    </portal:articles>
                </section>
                <div class="loadingmore text-center">加载更多</div>
            </div>
            <div class="tab-pane fade" id="engineering" role="tabpanel" aria-labelledby="profile-tab">
                <section class="hall-list row">
                    <php>$category_ids=22;</php>
        						<portal:articles limit="" order="post.published_time DESC" categoryIds="$category_ids">
                    <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                        <div class="card hall-card">
                            <div class="card-img-top">
                                <figure class="figure">
                                    <a href="{:url('portal/Article/index',array('id'=>$vo['id'],'cid'=>$vo.category_id))}">
                                        <if condition="empty($vo.more.thumbnail)">
												                <img src="__TMPL__/public/assets/images/default_tupian4.png" class="img-fluid" alt="{$vo.post_title}"/>
												                <else/>
												                <img src="{:cmf_get_image_url($vo.more.thumbnail)}" class="img-fluid" alt="{$vo.post_title}"/>
												                </if>
                                        <figcaption class="cis-mask">
                                            <div class="slide-boom-mask">
                                                <div class="hall-card-eye iconcis icon-eye"></div>
                                            </div>
                                        </figcaption>
                                    </a>
                                </figure>
                            </div>
                            <div class="card-body">
                                <h6 class="card-title">{$vo.post_title}</h6>
                                <div class="card-text row card-tags">
                                    <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;<?php echo date('Y-m-d H:i',$vo['published_time']);?></span>
                                    <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;{$vo.comment_count}</span>
                                    <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;{$vo.post_hits}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    </portal:articles>
                </section>
                <div class="loadingmore text-center">加载更多</div>
            </div>
            <div class="tab-pane fade" id="humanities" role="tabpanel" aria-labelledby="profile-tab">
                <section class="hall-list row">
                    <php>$category_ids=23;</php>
        						<portal:articles limit="" order="post.published_time DESC" categoryIds="$category_ids">
                    <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                        <div class="card hall-card">
                            <div class="card-img-top">
                                <figure class="figure">
                                    <a href="{:url('portal/Article/index',array('id'=>$vo['id'],'cid'=>$vo.category_id))}">
                                        <if condition="empty($vo.more.thumbnail)">
												                <img src="__TMPL__/public/assets/images/default_tupian4.png" class="img-fluid" alt="{$vo.post_title}"/>
												                <else/>
												                <img src="{:cmf_get_image_url($vo.more.thumbnail)}" class="img-fluid" alt="{$vo.post_title}"/>
												                </if>
                                        <figcaption class="cis-mask">
                                            <div class="slide-boom-mask">
                                                <div class="hall-card-eye iconcis icon-eye"></div>
                                            </div>
                                        </figcaption>
                                    </a>
                                </figure>
                            </div>
                            <div class="card-body">
                                <h6 class="card-title">{$vo.post_title}</h6>
                                <div class="card-text row card-tags">
                                    <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;<?php echo date('Y-m-d H:i',$vo['published_time']);?></span>
                                    <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;{$vo.comment_count}</span>
                                    <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;{$vo.post_hits}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    </portal:articles>
                </section>
                <div class="loadingmore text-center">加载更多</div>
            </div>
        </div>
    </div>
</div>
<style>
.hall-card .card-body {
    padding: 1.25rem 5.8% 1rem;
    background: #f5f5f5;
}
.hall-card .card-body .card-title {
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}
.hall-card-eye {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1.5rem;
    margin-left: -1.5rem;
    font-size: 3rem;
    color: #fff;
}
</style>
<include file="public@common_footer">
<script>
    var swiper = new Swiper('.swiper-container', {
        autoplay: true,
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });

</script>
</body>
</html>